<template>
  <div>
    <el-tag :key="`${tag}-${i}`" v-for="(tag,i) in tags" :closable='conf.closable' :size="conf.tagSize"
      :disable-transitions="false" @close="handleClose(tag)">
      {{tag}}
    </el-tag>
    <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" :size="conf.inputSize"
      :style="{width:conf.inputWidth+'px'}" @keyup.enter.native.prevent="handleInputConfirm" @blur="handleInputConfirm">
    </el-input>
    <el-button v-else type="primary" class="button-new-tag" :size="conf.buttonSize" icon="el-icon-plus"
      @click="showInput" circle v-show="conf.closable"></el-button>
  </div>
</template>
<style>
.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
}

.input-new-tag {
  margin-left: 10px;
  vertical-align: bottom;
}
</style>

<script>
const defaultConfig = {
  tagSize: 'medium',
  buttonSize: 'mini',
  inputSize: 'mini',
  inputWidth: '120',
  allowDuplicate: false, //是否允许值重复
  autoCloseInput: true, //添加一个元素后是否自动关闭input
  closable: true,
}
export default {
  model: {
    prop: 'tags',
    event: 'change',
  },
  props: {
    tags: Array,
    config: Object,
  },
  data() {
    return {
      conf: Object.assign({}, defaultConfig, this.config),
      inputVisible: false,
      inputValue: '',
    }
  },
  methods: {
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1)
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      let inputValue = this.inputValue
      if (!inputValue) {
        this.inputVisible = false
        return
      }
      if (this.conf.allowDuplicate || !this.tags.includes(inputValue)) {
        this.tags.push(inputValue)
      }
      this.inputValue = ''
      if (this.conf.autoCloseInput) {
        this.inputVisible = false
      }
    },
  },
  watch: {
    tags: function (newValue, oldValue) {
      this.$emit('update', newValue)
    },
  },
}
</script>